<template>
  <div class="articlelist">
    <div class="article-content">
      <div class="article">
        <div class="cover-content">
          <div class="cover">
            <img v-if="article.img_url" :src="article.img_url" shape="square" />
            <img v-else :src="defaultImg" shape="square" />
          </div>
          <div class="article-contains">
            <el-link
              :underline="false"
              type="info"
              @click="GoDetail"
              class="title"
              >{{ article.article_title }}</el-link
            >
            <div class="summary" v-html="formattedArticleAbstract"></div>
          </div>
        </div>

        <div class="meta">
          <div class="options">
            <el-link
              :underline="false"
              type="info"
              @click="openCommentList"
              class="icon"
              ><svg
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                width="1em"
                height="1em"
                focusable="false"
                aria-hidden="true"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M23 11.5C23 5.70101 18.299 1 12.5 1C6.70101 1 2 5.70101 2 11.5C2 13.4179 2.51422 15.2157 3.4123 16.7631L2.08689 20.7393C1.83512 21.4946 2.52398 22.2269 3.29323 22.0218L7.70712 20.8448C9.14399 21.5832 10.7733 22 12.5 22C18.299 22 23 17.299 23 11.5ZM7.5 13C6.67157 13 6 12.3284 6 11.5C6 10.6716 6.67157 10 7.5 10C8.32843 10 9 10.6716 9 11.5C9 12.3284 8.32843 13 7.5 13ZM14 11.5C14 12.3284 13.3284 13 12.5 13C11.6716 13 11 12.3284 11 11.5C11 10.6716 11.6716 10 12.5 10C13.3284 10 14 10.6716 14 11.5ZM17.5 13C16.6716 13 16 12.3284 16 11.5C16 10.6716 16.6716 10 17.5 10C18.3284 10 19 10.6716 19 11.5C19 12.3284 18.3284 13 17.5 13Z"
                  fill="currentColor"
                ></path>
              </svg>
              {{ article.comment_count }} 条评论</el-link
            >
            <el-link
              :underline="false"
              type="info"
              @click="shareArticle"
              class="icon"
              ><svg
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                width="16px"
                height="16px"
                focusable="false"
                aria-hidden="true"
              >
                <path
                  d="M22.7249 11.31L14.6525 2.81134C14.0331 2.15917 12.9388 2.59979 12.9388 3.50137V7.50289C5.97773 7.50289 2 12 2 17.9961C2 18.4958 2.2413 20.1767 2.5558 20.3122C2.69275 20.3713 2.8436 20.298 2.99443 19.9949C5.21806 15.5256 7.46938 15.4977 12.9388 15.4977V20.4986C12.9388 21.4002 14.0331 21.8408 14.6525 21.1887L22.7249 12.69C23.0917 12.3039 23.0917 11.6961 22.7249 11.31Z"
                  fill="currentColor"
                ></path></svg
              >&nbsp;分享</el-link
            >
          </div>
          <span v-if="!isMobile" class="time">{{
            article.update_time | formatDate
          }}</span>
        </div>
      </div>
    </div>
    <el-collapse-transition>
      <CommentList
        v-if="isCommentOpen"
        :commentList="commentList"
        :page="page"
        :article="article"
        :count="count"
      />
    </el-collapse-transition>
  </div>
</template>

<script>
import { copyToClipboard } from '@/utils/tools'
import CommentList from '../Comment/CommentList'
import getCommentList from '@/mock/comment'
import defaultImg from '@/assets/img/defaultImg.jpg'
import SvgIcon from '@/components/Tools/SVGIcon.vue'

export default {
  name: 'ArticleCard',

  data() {
    return {
      limit: 3,
      page: 1,
      isCommentOpen: false,
      commentList: [],
      count: 0,
      isReload: false,
      defaultImg: defaultImg
    }
  },
  computed: {
    formattedArticleAbstract() {
      return this.$options.filters.removeBrTags(this.article.article_abstract)
    }
  },
  filters: {
    removeBrTags(value) {
      return value.replace(/<br>/g, '')
    }
  },
  props: {
    article: {
      type: Object,
      required: true
    }
  },
  methods: {
    async openCommentList() {
      // 如果已经打开了直接关闭
      if (this.isCommentOpen) return (this.isCommentOpen = false)
      const { article, limit, page } = this
      // 获取评论列表
      this.$store.dispatch('article/getCurrentCommentList', {
        article,
        limit,
        page
      })
      const res = await this.$API.article.getCommentList(
        article.id,
        limit,
        page
      )
      console.log('res', res)
      if (res.status == 200) {
        this.count = res.data.count

        this.commentList = res.data.payload
      }
      this.isCommentOpen = !this.isCommentOpen
    },
    // 重载评论列表
    ReloadCommentList() {
      this.isReload = true
      this.openCommentList()
      this.isReload = false
    },
    // 发送跳转详情页事件
    GoDetail() {
      console.log('GoDetail')
      this.$router.push({
        name: 'ArticleDetail',
        params: { id: this.article.id }
      })
    },
    // 分享链接
    shareArticle() {
      const currentUrl =
        window.location.origin + '/articleDetail/' + this.article.id
      copyToClipboard(currentUrl) // 调用复制链接到剪贴板的方法
      alert('当前页面链接已复制到剪贴板')
    }
  },
  components: {
    CommentList,
    SvgIcon
  },
  mounted() {},
  beforeDestroy() {}
}
</script>

<style scoped>
.articlelist {
  display: flex;
  flex-wrap: wrap;
  /* padding: 8px; */
  border-radius: 10px;

  /* border: 1px solid #727477; */
}
.article-content {
  width: 100%;
  display: flex;
  /* margin-right: 20px; */
}
.article {
  width: 100%;
  padding: 20px;
}
.article .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: #121212;
}
.more {
  color: #969696;
}

.list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.meta {
  /* margin-bottom: 10px; */
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.options {
  /* float: left; */
  color: #b4b4b4;
  font-size: 16px;
}
.author {
  margin-right: 10px;
  color: #b4b4c5;
}
.author:hover {
  color: #9f7878;
}
.time {
  color: #b9b6b4;
  /* float: right; */
}
.article-contains {
  margin-left: 20px;
  line-height: 1.8em;
  height: 3.6em;
  width: 100%;
}

.summary {
  color: #657274;
  overflow: hidden;
  height: 100%;
  font-size: 14px;
}
.icon {
  color: #b4b4b4;
  margin-right: 10px;
}
.cover-content {
  display: flex;
}
.cover {
  max-width: 5.4em;
  border-radius: 10px;
}
.cover img {
  width: 5.4em;
  border-radius: 10px;

  height: 5.4em;
}
/* 移动端样式 */
@media screen and (max-width: 767px) {
  .article-content {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;

    /* margin-right: 20px; */
  }
  .cover-content {
    overflow: hidden;
    /* height: 120px; */
  }
  .artile {
    width: 100%;
    padding: 4px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  /* 其他移动端样式设置 */
}
</style>
